/* eslint-disable vue/no-use-v-if-with-v-for */
<template>
  <div id="add">
    <!-- 头部区域 -->
    <div class="header">
      <div class="header_lol">
        <div class="header_lol_1">
          <a href="//lol.qq.com/" class="logo-lol"></a>
          <a href="//lol.qq.com/guides/" class="logo-guide"></a>
        </div>
        <div class="header_lol_2">
          <div class="menu-item0">
            <a class="menu-item" href="//101.qq.com/index.shtml">
              <p>召唤师峡谷</p>
            </a>
            <div class="menu-item1">
              <a href="https://101.qq.com/index.shtml">
                <p>首页</p>
              </a>
              <a href="https://101.qq.com/hero.shtml">
                <p>英雄</p>
              </a>
              <a href="https://101.qq.com/rank.shtml">
                <p>统计</p>
              </a>
            </div>
          </div>
          <div class="menu-item0">
            <a class="menu-item" href="//101.qq.com/tft/index.shtml">
              <p>云顶之弈</p>
            </a>
            <div class="menu-item1">
              <p>英雄</p>
              <p>阵容</p>
              <p>装备</p>
              <p>攻略</p>
              <p>模拟器</p>
            </div>
          </div>
        </div>
        <div class="header_lol_3">
          <img src="http://ossweb-img.qq.com/images/lol/v2/personal/avatar/default.png" alt />
          <span class="header_lol_S"></span>
          <span class="header_lol_P">欢迎你,亲爱的</span>
          <span class="header_lol_A header_lol_P">召唤师</span>
          <div class="header_lol_N">
            <div class="header_lol_N1">
              <p>登录并且绑定大区后才可以查看您的具体信息哦</p>
              <p>(包括战绩、资产、声望）</p>
              <p>官网个人信息显示略有延迟，请以游戏数据为准</p>
            </div>
            <div class="header_lol_N2">进入个人中心</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 海报区域 -->
    <div class="poster">
      <div class="poster_img">
        <img src="https://game.gtimg.cn/images/lol/guides/tft/top-back-img.jpg" alt />
      </div>
    </div>

    <!-- Tab区域 -->
    <div style="width: 100%;height: 70px;background: #fff;">
      <div style="width: 1250px;height: 100%;margin: 0 auto;background: #fff;">
        <div class="Tab">
          <div class="Tab_t" v-for="el in Tab" :key="el.id" @click="Scribing(el.id)">
            <div class="Tab_d">{{el.name}}</div>
            <div>
              <p v-show="el.id==id" class="Tab_s"></p>
              <p class="Tab_p"></p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 展示区域 -->
    <div style="width:100%; background:rgb(248,248,248);">
      <!-- 展示英雄的地方 -->
      <div style="width:1250px; margin:0 auto; padding-top:40px;"  v-show='id===1'>
        <!-- 搜索区域 -->
        <div class="search">
          <input id="Search" type="text" style="outline:none;" placeholder="输入你想查找的英雄..." @change='search' />
          <a href="javascript:;" @click='search'></a>
        </div>
        <!-- 下面展示区域-->
        <div class="Exhibition" style="background:#fff; border:1px solid rgb(240,240,240);">
          <!-- 展示元素 -->
          <div class="element">
            <div class="element_1">
              元素
              <span></span>
            </div>
            <div class="element_content">
              <!-- 控制是否启用样式名 -->
              <div
                style="display:inline-block;"
                v-for="el in element"
                :key="el.id"
                @click.prevent="Screen"
              >
                <p
                  class="element_element"
                  :class="{element_true:!el.flag}"
                  @click="el.flag=!el.flag"
                >
                  <span :style="'background-position-x:'+el.X+ 'px;'"></span>
                  {{el.name}}
                </p>
              </div>
            </div>
          </div>
          <!-- 展示职业 -->
          <div class="element">
            <div class="element_1">
              职业
              <span></span>
            </div>
            <div class="element_content">
              <!-- 控制是否启用样式名 -->
              <div
                style="display:inline-block;"
                v-for="el in Occupation"
                :key="el.id"
                @click.prevent="Screen"
              >
                <p
                  class="element_element"
                  :class="{element_true:!el.flag}"
                  @click="el.flag=!el.flag"
                >
                  <span :style="'background-position-x:'+el.X+ 'px;'"></span>
                  {{el.name}}
                </p>
              </div>
            </div>
          </div>
          <!-- 展示费用 -->
          <div class="element">
            <div class="element_1">
              费用
              <span></span>
            </div>
            <div class="element_content">
              <!-- 控制是否启用样式名 -->
              <div
                v-for="el in Swordsman"
                :key="el.id"
                style="display:inline-block;"
                @click.prevent="Screen"
              >
                <p
                  class="element_element"
                  :class="{element_true:!el.flag}"
                  @click="el.flag=!el.flag"
                >
                  <span :style="'background-position-x:'+el.X+ 'px;'"></span>
                  {{el.name}}
                </p>
              </div>
            </div>
          </div>
          <!-- 展示筛选 -->
          <div class="element_0">
            <div class="element_screen" @click="Eliminate">
              <span>清除筛选</span>
            </div>
            <!-- 筛选的元素 -->
            <div class="element_Choice">
              <p v-for="el in screen" :key="el.id" @click="Choice(el.name)">
                <span class="element_s" :style="'background-position-x:'+ el.X+'px;'"></span>
                <span class="element_p">{{el.name}}</span>
                <span class="element_a"></span>
              </p>
            </div>
            <!-- 右侧的排版格式 -->
            <div class="element_layout">
              <span class="element_s"></span>
              <span class="element_p"></span>
            </div>
          </div>
          <!-- 英雄展示 -->
          <div class="element_Hero">
            <div
              class="champion0"
              v-for="el in Hero"
              :key="el.id"
              @click="Voice(el.bgMusic)"
              v-show="el.flag"
            >
              <!-- 点击英雄音频播放 -->
              <div>
                <audio :id="el.bgMusic" :src="el.banAudio"></audio>
              </div>
              <div class="champion">
                <div class="triangle"></div>
                <div class="pic-shadow"></div>
                <div class="synergies">
                  <div>
                    <span :style="'background-position-x:'+ el.elementX+'px;'" class="synergies_s"></span>
                    <span>{{el.element}}</span>
                  </div>
                  <div>
                    <span
                      :style="'background-position-x:'+ el.OccupationX+'px;'"
                      class="synergies_a"
                    ></span>
                    <span>{{el.Occupation}}</span>
                  </div>
                </div>
                <img :src="el.src" alt />
                <div :class="el.class">
                  <span>{{el.name}}</span>
                  <div class="money">
                    <span class="money_s"></span>
                    <span>{{el.Swordsman}}</span>
                  </div>
                </div>
              </div>
              <div class="Move">
                <div class="Move_1">
                  <img :src="el.srcmin" alt />
                  <div>{{el.name}}</div>
                </div>
                <div class="Move_2">
                  <div>
                    <span :style="'background-position-x:'+ el.elementX+'px;'" class="synergies_s"></span>
                    <span>{{el.element}}</span>
                  </div>
                  <div>
                    <span
                      :style="'background-position-x:'+ el.OccupationX+'px;'"
                      class="synergies_a"
                    ></span>
                    <span>{{el.Occupation}}</span>
                  </div>
                </div>
                <div class="Move_3">
                  <div class="Move_div1"></div>
                  <div class="Move_div2">{{el.Swordsman}}金币</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 展示阵容的地方 -->
      <div style="width:1250px; margin:0 auto; padding-top:40px;"  v-show='id===2'>
        <div class="Lineup">
          <p>阵容施工中</p>
          <p>去看第一个,憨憨</p>
        </div>
      </div>
      <!-- 展示装备的地方 -->
      <div style="width:1250px; margin:0 auto; padding-top:40px;"  v-show='id===3'>
        <div class="equipment">
          <p>装备施工中</p>
          <p>去看第一个,憨憨</p>
        </div>
      </div>
      <!-- 展示攻略的地方 -->
      <div style="width:1250px; margin:0 auto; padding-top:40px;"  v-show='id===4'>
        <div class="Strategy">
          <p>攻略施工中</p>
          <p>去看第一个,憨憨</p>
        </div>
      </div>
      <!-- 展示模拟器的地方 -->
      <div style="width:1250px; margin:0 auto; padding-top:40px;"  v-show='id===5'>
        <div class="simulator">
          <p>模拟器施工中</p>
          <p>去看第一个,憨憨</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Attribute from './data/attribute'
export default {
  data: () => ({
    id: 1,
    weight: 600,
    Tab: [
      { id: 1, name: '英雄' },
      { id: 2, name: '阵容' },
      { id: 3, name: '装备' },
      { id: 4, name: '攻略' },
      { id: 5, name: '模拟器' }
    ],
    element: [], // 元素数据
    Occupation: [], // 职业数据
    Swordsman: [], // 费用数据
    Hero: [], // 英雄数据
    screen: []
  }),
  created () {
    this.element = Attribute.element.data
    this.Occupation = Attribute.Occupation.data
    this.Swordsman = Attribute.Swordsman.data
    this.Hero = Attribute.Hero.data
    this.Screen()
  },
  mounted () {
    var DIV = document.querySelectorAll('.Tab_d')
    DIV[this.id - 1].className = 'Tab_d aaa'
  },
  methods: {
    Scribing (id) {
      this.id = id
      var DIV = document.querySelectorAll('.Tab_d')
      for (var i = 0; i < DIV.length; i++) {
        if (i === this.id - 1) {
          DIV[i].className = 'Tab_d aaa'
        } else {
          DIV[i].className = 'Tab_d'
        }
      }
    },
    Voice (banAudio) {
      var audio = document.getElementById(banAudio)
      audio.play()
      // console.log(audio)
    },
    Screen () { // 点击上面的三行,同时他里面的flag会变相反的,然后这边把为false的都渲染到筛选里面
      // console.log(666)
      // console.log(this.element)
      this.screen = []
      this.element.forEach(el => {
        if (el.flag === false) {
          this.screen.push(el)
        }
      })
      this.Occupation.forEach(el => {
        if (el.flag === false) {
          this.screen.push(el)
        }
      })
      this.Swordsman.forEach(el => {
        if (el.flag === false) {
          this.screen.push(el)
        }
      })
      this.hero()
      // console.log(this.screen)
    },
    Choice (Name) { // 点击筛选出来的元素,并传name过来,把符合的变成true或者fasle
      // console.log(Name)
      this.element.forEach(el => {
        if (el.name === Name) {
          el.flag = !el.flag
        }
      })
      this.Occupation.forEach(el => {
        if (el.name === Name) {
          el.flag = !el.flag
        }
      })
      this.Swordsman.forEach(el => {
        if (el.name === Name) {
          el.flag = !el.flag
        }
      })
      this.Screen()
      this.hero()
    },
    Eliminate () { // 点击清除筛选,把所有为 false的都变成true
      this.element.forEach(el => {
        if (el.flag === false) {
          el.flag = !el.flag
        }
      })
      this.Occupation.forEach(el => {
        if (el.flag === false) {
          el.flag = !el.flag
        }
      })
      this.Swordsman.forEach(el => {
        if (el.flag === false) {
          el.flag = !el.flag
        }
      })
      this.Screen()
      this.hero()
    },
    hero () { // 判断下面英雄根据选中的展示
      if (this.screen.length === 0) {
        this.Hero.forEach(el => {
          el.flag = true
        })
        return
      }
      this.Hero.forEach(el => {
        el.flag = true
      })
      this.screen.forEach(el => {
        this.Hero.forEach(ele => {
          if (ele.flag === true) {
            if (el.name === ele.element || el.name === ele.Occupation || el.name === ele.Swordsman + '金币') {
              ele.flag = true
            } else {
              ele.flag = false
            }
          }
        })
      })
    },
    search () { // 搜索框内容变时,查看是否有符合内容的
      this.Hero.forEach(el => { el.flag = false })
      var Search = document.getElementById('Search')
      this.Hero.forEach(el => {
        if (el.name.includes(Search.value)) {
          el.flag = true
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
body,
html {
  width: 100%;
}
a {
  text-decoration: none;
  outline: 0;
  color: #fff;
}
a:active {
  color: #fff;
}
@IMG: url(//game.gtimg.cn/images/lol/guides/sprite-img.png);
@ICON: url(//game.gtimg.cn/images/lol/guides/tft/spr-icon.png);

// 头部区域
.header {
  width: 100%;
  height: 70px;
  background: #000;
  margin: 0 auto;
  .header_lol {
    width: 1250px;
    height: 70px;
    background: rgb(0, 0, 0);
    margin: 0 auto;
    .header_lol_1 {
      height: 70px;
      margin: 0 80px 0 0;
      float: left;
      .logo-lol {
        margin: 0 36px 0 0;
        background-image: @IMG;
        background-position: -933px -92px;
        width: 167px;
        height: 60px;
        display: inline-block;
      }
      .logo-guide {
        margin: 0 36px 0 0;
        background-image: @IMG;
        background-position: -1869px -20px;
        width: 133px;
        height: 55px;
        display: inline-block;
      }
    }
    .header_lol_2 {
      height: 70px;
      background: rgb(0, 0, 0);
      float: left;
      color: #fff;
      text-align: center;
      .menu-item0 {
        height: 70px;
        width: 120px;
        float: left;
        margin-right: 50px;
        position: relative;
      }
      .menu-item0:hover .menu-item1 {
        display: block;
      }
      .menu-item {
        line-height: 70px;
        cursor: pointer;
      }
      .menu-item:hover {
        color: rgb(197, 218, 17);
      }
      .menu-item1 {
        width: 120px;
        background: rgb(0, 0, 0);
        position: absolute;
        top: 70px;
        display: none;
        padding: 25px 0;
        background: linear-gradient(#000, #000, rgba(255, 255, 255, 0));
      }
      .menu-item1 p {
        font-size: 14px;
        line-height: 45px;
        cursor: pointer;
      }
      .menu-item1 p:hover {
        color: rgb(197, 218, 17);
      }
      .menu-item1:hover {
        display: block;
      }
    }
    .header_lol_3:hover .header_lol_N {
      visibility: visible;
      opacity: 1;
    }
    .header_lol_3 {
      width: 250px;
      padding: 0 30px;
      height: 70px;
      background: rgb(0, 0, 0);
      float: right;
      text-align: right;
      position: relative;
      img {
        position: absolute;
        left: 38px;
        top: 18px;
        width: 32px;
      }
      span {
        display: inline-block;
        float: left;
      }
      .header_lol_S {
        margin-right: 20px;
        background-image: @IMG;
        background-position: -1174px -269px;
        width: 48px;
        height: 48px;
        margin-top: 10px;
      }
      .header_lol_P {
        height: 70px;
        line-height: 70px;
        color: #fff;
      }
      .header_lol_A {
        color: rgb(238, 255, 199);
      }
      .header_lol_N {
        transition: 0.5s;
        visibility: hidden;
        opacity: 0;
        position: absolute;
        width: 100%;
        height: 200px;
        background: rgba(0, 0, 0, 0.7);
        left: 0;
        top: 70px;
        .header_lol_N1 {
          width: 100%;
          height: 150px;
          color: rgb(129, 129, 129);
          font-size: 12px;
          text-align: center;
          line-height: 21px;
          padding-top: 40px;
          box-sizing: border-box;
        }
        .header_lol_N2 {
          height: 50px;
          width: 100%;
          background: #000;
          color: #fff;
          text-align: center;
          line-height: 50px;
          font-size: 17px;
          cursor: pointer;
        }
      }
    }
  }
}

// 海报区域
.poster {
  width: 100%;
  height: 320px;
  background: #fff;
  .poster_img {
    width: 1899px;
    height: 320px;
    margin: 0 auto;
    background: rgb(255, 255, 255);
    overflow: hidden;
    img {
      width: 1920;
      height:320px;
    }
  }
}

//Tab区域
.Tab {
  text-align: center;
  margin: 0 auto;
  .Tab_t {
    display: inline-block;
    font-size: 18px;
    height: 70px;
    line-height: 70px;
    padding: 0 25px;
    cursor: pointer;
    position: relative;
  }
  .Tab_d {
    height: 67px;
  }
  .aaa {
    font-weight: 600;
  }
  .Tab_p {
    width: 0;
    height: 3px;
    background: rgb(255, 124, 119);
    margin: 0 auto;
    transition: 0.3s;
  }
  .Tab_s {
    width: 100%;
    height: 3px;
    background: rgb(255, 124, 119);
    position: relative;
    margin-bottom: -3px;
  }
  .Tab_t:hover {
    font-weight: 600;
    .Tab_p {
      width: 100%;
    }
  }
}

//英雄块-搜索区域
.search {
  width: 320px;
  height: 45px;
  background: rgb(255, 255, 255);
  margin-bottom: 20px;
  border: 1px solid rgb(230, 230, 230);
  border-radius: 23px;
  position: relative;
  input {
    width: 300px;
    height: 45px;
    padding-left: 10px;
    border-radius: 23px;
    border: none;
  }
  a {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: @ICON;
    background-position: -500px 0;
    position: absolute;
    top: 12px;
    right: 20px;
  }
}

//英雄块
.Exhibition {
  min-height: 900px;

  // 元素，职业，费用的样式
  .element {
    width: 100%;
    height: 79px;
    background: red;
    background: url(//game.gtimg.cn/images/lol/guides/tft/cut.png) no-repeat
      23px 70px;
    .element_1 {
      float: left;
      width: 100px;
      box-sizing: border-box;
      font-size: 12px;
      padding-left: 20px;
      line-height: 70px;
      // background: blue;
      span {
        display: inline-block;
        width: 20px;
        height: 20px;
        // background: red;
        float: right;
        margin-top: 24px;
        margin-right: 25px;
        background: url(//game.gtimg.cn/images/lol/guides/tft/spr-icon.png)
          no-repeat -500px -20px;
      }
    }
    .element_content {
      float: left;
      width: 1148px;
      height: 70px;
      // background: red;
      .element_element {
        min-width: 88px;
        display: inline-block;
        margin-top: 24px;
        font-size: 13px;
        line-height: 24px;
        color: #888888;
        cursor: pointer;
        span {
          float: left;
          margin-right: 3px;
          background-image: @ICON;
          display: inline-block;
          width: 20px;
          height: 20px;
        }
      }
      .element_element:hover {
        color: #deb762;
        span {
          background-position-y: -20px;
        }
      }
      .element_true {
        color: #deb762;
        span {
          background-position-y: -20px;
        }
      }
    }
  }

  // 筛选的样式
  .element_0 {
    width: 100%;
    min-height: 45px;
    background: rgb(255, 255, 255);
    padding: 15px 0 0;
    border-bottom: 1px solid rgb(236, 236, 236);
    overflow: hidden;
    .element_screen {
      float: left;
      width: 82px;
      height: 28px;
      text-align: center;
      font-size: 14px;
      line-height: 28px;
      margin-left: 22px;
      padding-right: 20px;
      border-right: 1px solid rgb(236, 236, 236);
      span {
        background: #deb762;
        display: inline-block;
        width: 100%;
        color: #fff;
        cursor: pointer;
      }
    }
    .element_layout {
      margin-top: -5px;
      float: right;
      width: 100px;
      height: 36px;
      margin-right: 22px;
      padding-left: 20px;
      border-left: 1px solid rgb(236, 236, 236);
      span {
        float: right;
        display: inline-block;
        width: 36px;
        height: 36px;
        background: red;
        cursor: pointer;
      }
      .element_p {
        background: url(//game.gtimg.cn/images/lol/guides/tft/spr-switch.png)
          no-repeat;
        background-position: 0 0;
        margin-right: 10px;
      }
      .element_s {
        background: url(//game.gtimg.cn/images/lol/guides/tft/spr-switch.png)
          no-repeat;
        background-position: -36px -36px;
        margin-right: 10px;
      }
    }
    .element_Choice {
      max-width: 940px;
      margin-left: 20px;
      float: left;
      min-height: 28px;
      // background: red;
      p {
        height: 28px;
        cursor: pointer;
        box-sizing: border-box;
        border: 1px solid #deb762;
        display: inline-block;
        min-width: 100px;
        margin-right: 15px;
        margin-bottom: 15px;
        text-align: center;
        padding: 3px 0;
        span {
          font-size: 14px;
          color: #deb762;
        }
        .element_s {
          float: left;
          display: inline-block;
          width: 20px;
          height: 20px;
          margin-left: 3px;
          background-image: @ICON;
          background-position-y: -20px;
        }
        .element_a {
          margin-right: 5px;
          float: right;
          display: inline-block;
          width: 20px;
          height: 20px;
          background-image: @ICON;
          background-position-x: -520px;
          // background-position-y: -20px;
        }
      }
    }
  }

  //英雄展示
  .element_Hero {
    width: 100%;
    min-height: 800px;
    background: rgb(255, 255, 255);
    padding: 35px 10px;
    box-sizing: border-box;
    .champion0:hover .Move {
      display: block;
    }
    .champion0 {
      display: inline-block;
      position: relative;
      width: 224px;
      height: 154px;
      margin: 0 10px 30px;

      //鼠标移入展示区域
      .Move {
        display: none;
        width: 300px;
        height: 130px;
        background: rgb(39, 39, 39);
        position: absolute;
        top: -140px;
        left: -25px;
        z-index: 51;
        padding: 0 10px;
        .Move_1 {
          box-sizing: border-box;
          width: 85px;
          height: 100px;
          // background: red;
          position: absolute;
          top: 10px;
          left: 20px;
          border-right: 1px solid rgb(92, 92, 92);
          border-bottom: 1px solid rgb(92, 92, 92);
          img {
            width: 60px;
            height: 60px;
            border: 1px solid rgb(126, 126, 126);
          }
          div {
            font-size: 14px;
            color: #fff;
            margin-left: 8px;
          }
        }
        .Move_2 {
          box-sizing: border-box;
          width: 110px;
          height: 100px;
          position: absolute;
          top: 10px;
          left: 105px;
          border-bottom: 1px solid rgb(92, 92, 92);
          padding-left: 20px;
          padding-top: 17px;
          color: #fff;
          font-size: 14px;
          div {
            min-height: 30px;
            // background: red;
          }
          span {
            float: left;
            // display: inline-block;
          }
          .synergies_s {
            margin-right: 5px;
            width: 20px;
            height: 20px;
            background: @ICON;
            background-position-y: -20px;
          }
          .synergies_a {
            margin-right: 5px;
            width: 20px;
            height: 20px;
            background: @ICON;
            background-position-y: -20px;
          }
        }
        .Move_3 {
          box-sizing: border-box;
          width: 85px;
          height: 100px;
          position: absolute;
          top: 10px;
          left: 215px;
          border-left: 1px solid rgb(92, 92, 92);
          border-bottom: 1px solid rgb(92, 92, 92);
          color: #fff;
          font-size: 14px;
          padding-top: 22px;
          padding-left: 30px;
          .Move_div1 {
            width: 20px;
            height: 20px;
            background: url(//game.gtimg.cn/images/lol/guides/tft/spr-icon.png)
              no-repeat;
            background-position: -480px -20px;
            margin-left: 8px;
          }
        }
      }

      .champion {
        cursor: pointer;
        width: 224px;
        height: 154px;
        background: rgb(118, 47, 199);
        overflow: hidden;
        position: relative;

        //英雄默认展示地区
        .triangle {
          position: absolute;
          top: -12px;
          left: -12px;
          // border: 12px solid red;
          border-left: 12px solid transparent;
          border-top: 12px solid transparent;
          border-bottom: 12px solid transparent;
          border-right: 12px solid #ffffff;
          transform: rotate(45deg);
          z-index: 10;
        }
        .pic-shadow {
          width: 224px;
          height: 116px;
          position: absolute;
          top: 0;
          left: 0;
          background: url(//game.gtimg.cn/images/lol/guides/tft/champion-shadow.png)
            no-repeat;
          z-index: 8;
        }
        .synergies {
          min-height: 60px;
          position: absolute;
          bottom: 48px;
          left: 12px;
          z-index: 9;
          // background: #deb762;
          font-size: 14px;
          color: #fff;
          div {
            min-height: 30px;
          }
          span {
            float: left;
          }
          .synergies_s {
            margin-right: 5px;
            width: 20px;
            height: 20px;
            background: @ICON;
            background-position-y: -60px;
          }
          .synergies_a {
            margin-right: 5px;
            width: 20px;
            height: 20px;
            background: @ICON;
            background-position-y: -60px;
          }
        }
        img {
          position: absolute;
          top: 0;
          left: 0;
          height: 116px;
        }
        .Name {
          position: relative;
          border-top: 1px solid rgb(249, 255, 223);
          box-sizing: border-box;
          width: 224px;
          height: 38px;
          margin-top: 116px;
          padding: 0 10px;
          color: #fffde4;
          line-height: 38px;
          font-size: 17px;
          .money {
            font-size: 28px;
            font-weight: 600;
            position: absolute;
            right: 10px;
            top: 0;
            .money_s {
              margin-right: 5px;
              display: inline-block;
              width: 20px;
              height: 20px;
              background: url(//game.gtimg.cn/images/lol/guides/tft/spr-icon.png)
                no-repeat;
              background-position: -480px -20px;
            }
          }
        }
        @Bimg: url(//game.gtimg.cn/images/lol/guides/tft/spr-border.png)
          no-repeat;
        .money1 {
          background: @Bimg;
          background-position: 0 -220px;
        }
        .money2 {
          background: @Bimg;
          background-position: 0 -180px;
        }
        .money3 {
          background: @Bimg;
          background-position: 0 -140px;
        }
        .money4 {
          background: @Bimg;
          background-position: 0 -100px;
        }
        .money5 {
          background: @Bimg;
          background-position: 0 -60px;
        }
        .money7 {
          background: @Bimg;
          background-position: 0 -261px;
        }
      }
    }
  }
}

//阵容块
.Lineup,.equipment,.Strategy,.simulator {
  min-height: 900px;
  margin-top: 60px;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(240, 240, 240);
  color: rgb(226, 226, 226);
  letter-spacing: 20px;
  p:nth-child(1){
    font-size: 150px;
    text-align: center;
    line-height: 500px;
  }
  p:nth-child(2){
    font-size: 80px;
    text-align: center;
    margin-top: -100px;
  }
}
</style>
